﻿<template>
    <div class="person">
        姓  :<input type="text" v-model="firstName"><br>
        名  :<input type="text" v-model="lastName"><br>
        <!-- 全名:<span>{{firstName}}{{ lastName }}</span> -->
        全名:<span>{{fullName}}</span>
        <br>
        <button @click="changeFullName">修改名字</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { ref,reactive ,toRefs,computed} from 'vue';
    let firstName = ref("zhang")
    let lastName = ref("san")
    // 方法
    function fullName2(){
        console.log(1)
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value
    }
    // 计算 有缓存，重复计算直接使用结果，是只读属性
    // let fullName = computed(()=>{
    //     return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value
    // })
    // 修改为可读可写
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value
        },
        set(val){
            const [fName,lName] = val.split("-")
            firstName.value = fName
            lastName.value = lName
        }
    })

    function changeFullName(){
        fullName.value ="LI-si"
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>